<template>
	<view>
		<!-- 排序方式 -->
		<view class="comment_head_box">
			<text class="comment_head_title">评论</text>
			<text :class="sort==2?'comment_head_sort_activity':'comment_head_sort'" @click="orderChange(2)">最热</text>
			<text :class="sort==1?'comment_head_sort_activity':'comment_head_sort'" @click="orderChange(1)">最新</text>
		</view>

		<!-- 评论 -->
		<CommentContent v-for="(item,index) in dataList" :key="index" @moreClick="showCommentMore" :commentData="item"
					@replyClick="replyBtnClick" @video_play="videoPlayBack">
		</CommentContent>

		<!-- 无数据 -->
		<no-data v-if="dataList.length < 1" :height="400" icon="/static/bg/cat_qz.png" :iconMarginTop="100"
			showText="没有评论哦">
		</no-data>



		<!-- 查看更多评论 -->
		<uni-popup ref="popupComment" type="share">
			<son-comment-list class="son_comment" ref="son_comment" :article-id="articleId" @popupClose="closeCommentMore()"
							@touchmove.stop.prevent="moveHandle">
			</son-comment-list>
		</uni-popup>


	</view>
</template>

<script>
	import CommentContent from "@/components/comment/commentContent.vue";
	import SonCommentList from "@/components/comment/sonCommentList.vue";
	import NoData from "@/components/noTips/noData.vue"
	export default {
		props: {
			// 文章id
			articleId: {
				type: String,
				default () {
					return ''
				}
			}
		},
		components: {
			CommentContent,
			SonCommentList,
			NoData
		},
		data() {
			return {
				// 排序方式
				sort: 2,
				// 当前页
				currentPage: 1,
				// 分页大小
				pageSize: 12,
				// 数据
				dataList: [],
				// 没有更多了
				noMore: false,
				// 数据加载中
				loading: false,
			}
		},
		computed: {
			hasLogin() {
				return this.$authUtil.isLoginedin()
			}
		},
		created() {
			this.isLoaded = false
		},
		methods: {
			initData() {
				if (this.isLoaded) {
					return
				}
				this.currentPage = 1
				this.pageSize = 12
				this.getCommentList()
			},
			// 视频播放
			videoPlayBack(url){
				this.$emit('video_play',url)
			},
			// 回复按钮点击
			replyBtnClick(val){
				this.$emit('listReply',val)
			},
			// 查看更多评论
			showCommentMore(e) {
				this.$refs.popupComment.open('bottom')
				this.$nextTick(()=>{
					this.$refs.son_comment.init(e)
				})
				this.$emit('showCommentMore',true)
			},
			// 关闭更多评论
			closeCommentMore() {
				this.$refs.popupComment.close()
				this.$emit('showCommentMore',false)
			},
			// 排序改变
			orderChange(val){
				if(this.sort == val){
					return
				}
				this.sort = val
				this.getCommentList()
			},
			// 获取列表数据
			getCommentList() {
				if (this.loading) {
					return
				}
				let form = {
					page: this.currentPage,
					size: this.pageSize,
					sort: this.sort
				}
				this.loading = true
				this.$httpApi.baseCommentGet('open/reply/getRelyList/article/' + this.articleId, form).then(({data}) => {
					this.loading = false
					if (data.code == "000000") {
						this.dataList = data.data.records
						this.noMore = data.data.records.length < this.pageSize
						this.$emit('scrollSuccessEnd', data.data.records.length, !this.noMore)
					} else {
						this.$emit('scrollErrEnd')
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {
					this.$emit('scrollErrEnd')
					this.loading = false
				})
			},
			// 加载更多
			getMoreList() {
				if (this.loading || this.noMore || !this.hasLogin) {
					return
				}
				let form = {
					page: this.currentPage + 1,
					size: this.pageSize,
					contentType: ''
				}
				this.loading = true
				this.$httpApi.baseCommentGet('open/reply/getRelyList/article/' + this.articleId, form).then(({data}) => {
					this.loading = false
					if (data.code == "000000") {
						if (data.data.records && data.data.records.length > 0) {
							this.currentPage += 1
							this.dataList = [...this.dataList, ...data.data.records];
						}
						this.noMore = data.data.records.length < this.pageSize
						this.$emit('scrollSuccessEnd', data.data.records.length, !this.noMore)
					} else {
						this.$emit('scrollErrEnd')
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {
					this.$emit('scrollErrEnd')
					this.loading = false
				})
			},
			moveHandle(){

			}

		}




	}
</script>

<style lang="scss" scoped>
	// 评论排序
	.comment_head_box {
		display: flex;
		flex: 1;
		padding: 10px;
		flex-direction: row;
		border-bottom-color: #f5f5f5;
		border-bottom-width: 1px;
		padding-top: 15px;
		background-color: #FFFFFF;
	}

	.comment_head_title {
		font-size: 16px;
		flex: 1;

	}

	.comment_head_sort {
		padding: 0 5px;
		font-size: 13px;
		color: #666;
	}

	.comment_head_sort_activity {
		padding: 0 5px;
		font-size: 13px;
		color: #666;
		font-weight: bold;
	}
	.son_comment{
		height: 100vh;
		z-index: 9999;
	}
</style>
